{% extends "base.html" %}

{% block title %}Blog - Login{% endblock %}

{% block page_common_content %}

<div class="page-header">
  <h1>Login</h1>
</div>
<div class="col-md-4">
    <form action="/want_login/geetest/validate" method="post" class="form popup" role="form">
        {{ form.csrf_token }}

    <div class="form-group  required">
        <label class="control-label" for="username">Username</label>
        <input class="form-control" id="username" name="username" required type="text" value="">
    </div>
    <div class="form-group  required">
        <label class="control-label" for="password">Password</label>
        <input class="form-control" id="password" name="password" required type="password" value="">
    </div>

    <div id="embed-captcha">
         <label class="control-label" for="validator">Validator</label>
    </div>
    <p id="wait" class="show">Loading Validator......</p>
    <p id="notice" class="hide">Please Click Validator!</p>
    <br> 

    <div class="checkbox">
        <label>
            <input id="remember_me" name="remember_me" type="checkbox" value="y"> Keep me logged in
        </label>
    </div>

    <input class="btn btn-default" id="embed-submit" name="submit" type="submit" value="Login">
    </form>

    
</div>
{% endblock %}

{% block scripts %}
{{super()}}
<script src="{{ url_for('static',filename='js/gt.js') }}"></script>
<script>
        var handlerEmbed = function (captchaObj) {
            $("#embed-submit").click(function (e) {
                var validate = captchaObj.getValidate();
                if (!validate) {
                    $("#notice")[0].className = "show";
                    setTimeout(function () {
                        $("#notice")[0].className = "hide";
                    }, 2000);
                    e.preventDefault();
                }
            });
            captchaObj.appendTo("#embed-captcha");
            captchaObj.onReady(function () {
                $("#wait")[0].className = "hide";
            });
        };
        $.ajax({
            url: "/want_login/geetest/register?t=" + (new Date()).getTime(), 
            type: "get",
            dataType: "json",
            success: function (data) {

                initGeetest({
                    gt: data.gt,
                    challenge: data.challenge,
                    product: "float", 
                    lang: "en",
                    width: '100%',
                    offline: !data.success 
                }, handlerEmbed);
            }
        });
    </script>
{% endblock %}